<html>
	<head>
		<title>Quero Carona Ofertar</title>
		
                <meta http-equiv="X-UA-Compatible" content="IE=edge" charset="uft-8">

                <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/bootstrap.css">
		<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/bootstrap-responsive.min.css">
		<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/bootstrap-responsive.css">
		
		<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/styles.css">

		<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/bootstrap.js"></script>
		<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/bootstrap.min.js"></script>
		<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/bootstrap-modal.js"></script>
		<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/script.js"></script>

		<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/jquery.ui.datepicker.css">
		<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/jquery.ui.all.css">
		<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/jquery.ui.autocomplete.css">
		<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>assets/css/jquery-ui-1.8.20.custom.min.css">

		
		<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.ui.autocomplete.js"></script>
		<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.ui.position.js"></script>
		
		<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.ui.datepicker.js"></script>

		<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery-1.7.2.min.js"></script>
		<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery-ui-1.8.20.custom.min.js"></script>
		<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.ui.core.js"></script>
		<script type="text/javascript" src="<?php echo base_url(); ?>assets/js/jquery.ui.widget.js"></script>

		<script>
                $(function() {
                    $( "#datepicker" ).datepicker({	
                    });
                });
                
                function validaForm(form){
                    if (form.origem.value == "" || form.destino.value == "" || 
                        form.data.value == "" || form.hora.value == ""){
                        alert("Preencha os campos corretamente!");
                        return false
                    }
                }
                
                function back(){
                    location.href="javascript:history.go(-1)";
                }
		</script>
	</head>
	<body>
		<div class="canvas">	
			<div class="blueLayer">
				<div class="grayLayer">
                                    <div class="main-content">                            
                                        <form action="ofertar/criaViagem" method="post" onSubmit="return validaForm(this);">
                                            <input required="" name="origem" class="origem" type="text">
                                            <input required="" name="destino" class="destino" type="text">
                                            <input required="" name="data" class="calendario" type="text" id="datepicker" >
                                            <input required="" name="hora" class="hora" type="text">     			              			
                                            <select name="vagas" class="vagas">
                                            <option>1</option>
                                            <option>2</option>
                                            <option>3</option>
                                            <option>4</option>
                                            <option>5</option>
                                            </select>
                                            <input name="convidar" class="convidar" type="text">
                                            <script>
                                            	var makeItems = function(fbresponse) {
												  return $.map(fbresponse, function(item) {
													return {
													  label: item.name,
													  value: item.id,
													}
												  });
												};
												
												var setAutoComplete = function(parsed_items) {
												  $("#input_13").autocomplete({
													source : parsed_items,
													select : function(event, ui){
													  alert(ui.item.name);
													  $("#input_13").val(ui.item.name);
													  $("#input_10").val(ui.item.id);
													  return false;
													}
												  }).data("autocomplete")._renderItem = function(ul, item) {
													return $("<li></li>")
													  .data("item.autocomplete", item)
													  .append( $("<a></a>").html(item.name) )
													  .appendTo(ul); 
												  };
												};
												
												FB.api('/me/friends', function(fbresponse) {
												  setAutoComplete(makeItems(fbresponse.data));
												});
                                            </script>
                                            <textarea name="obs" id="textarea" class="obs" rows="3"></textarea>
                                            <div id="buttons">
                                                <input class="btn btn-success" id="btn_confirmar" type="submit" value="Confirmar"/>
                                                <input class="btn btn-warning" id="btn_cancelar" type="button"  value="Cancelar" onClick="back();"/>
                                                <!--<a class="btn btn-warning" id="btn_cancelar" href="principal">Cancelar</a>-->
                                            </div>
                                        </form>
		                    </div>
		                    <!--FIM DE DIV PRINCIPAL-->
                
				</div>
			</div>

                            <div class="divLogo"></div>
                            <div class="quero_carona"></div>
                            <div class="titofer"></div>


                            <div class="labdata"></div>
                            <div class="labhora"></div>
                            <div class="labvaga"></div>
                            <div class="labconvidado"></div>
                            <div class="labobs"></div>

                            <div class="laborigem"></div>
                            <div class="labdestino"></div>
		</div>	
	</body>
        
</html>